<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import China from "@/utils/China";
import America from "@/utils/America";

const platformList = {
  加利福尼亚州: "zora",
  纽约州: "opensea",
  广东: "hdmeta",
  武汉: "中艺数藏",
};

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "500px",
    },
    height: {
      type: String,
      default: "400px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Array,
      required: true,
    },
    country: {
      type: String,
      default: "America",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
        // console.log("mapdata",val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      this.setOptions(this.chartData);
    },

    setOptions(data) {
      this.chart.setOption({
        geo: {
          map: this.country,
          // 把中国地图放大了1.2倍
          zoom: 1.25,
          itemStyle: {
            //每一项的样式
            areaColor: "#EFF", //地区颜色
            borderColor: "#000", //边框颜色
            borderWidth: "0.5", //边框宽度
            opacity: 1, //不透明度
          },
          label: {
            //文字
            show: true, //展示文字
            fontSize: 8, //字体大小
          },
          emphasis: {
            //附加属性（强调）
            itemStyle: {
              areaColor: "#ffcf49", //鼠标经过的颜色
            },
            select: {
              //选中设置
              itemStyle: {
                areaColor: "#ffcf49", //选中颜色设置
              },
            },
          },
        },
        tooltip: {
          //提示框
          show: true, //默认展示
          trigger: "item", //触发展示每一项
          formatter(params) {
            // console.log("params",params)
            return `${params.name} <br/> 平台：${
              params.value ? platformList[params.name] : "无"
            } <br/>风险藏品数：${params.value ? params.value : 0}
            <br/>拥有藏品总数：${params.data.total ? params.data.total : 0}`;
          },
          //弹窗样式
          padding: 3, //内边距
          borderColor: "#5470c6",
          backgroundColor: "#fff",
          textStyle: {
            //文本样式
            color: "#000",
          },
        },
        series: [
          {
            //数据
            type: "map", //类型
            geoIndex: 0, //索引
            data: data,
          },
        ],
        visualMap: {
          //视觉映射
          bottom: "-5",
          type: "piecewise", //分段
          pieces: [
            //块<!--min~max区间值----label显示的字段（标题）color:展示的颜色-->
            { min: 0, max: 0, label: "0", color: "#ffeeee" },
            { min: 1, max: 9, label: "1-9", color: "#ffe4da" },
            { min: 10, max: 99, label: "10-99", color: "#ff937f" },
            { min: 100, max: 999, label: "100-999", color: "#ff6c5e" },
            { min: 1000, max: 9999, label: ">1000", color: "#fe3335" },
            // { min: 10000, label: "≥10000", color: "#cd0000" },
          ],
        },
      });
    },
  },
};
</script>
